<!--
 * @Author: lxw
 * @Date: 2021-07-10 08:09:54
 * @LastEditTime: 2021-07-11 15:30:15
 * @Description: 
 * @FilePath: \vscode\day02\xxtx-ui\index.html
 * 可以输入预定的版权声明、个性签名、空行等
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行学天下</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
    
        <!-- 头部 -->
        <div class="header">
            <div class="herderleft">
                <div class="logo">
                    行学天下
                </div>
                <div class="title">
                    行学天下
                </div>
            </div>
            <div class="herderright">
                <div class="callme">
                    <a href="#">
                        <img src="./img/电话.png" alt="图片丢失">
                        致电我们
                    </a>
                </div>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="lunbotu">
<div class="lunbotuimg">
    <ul>
        <li class="item" style="display: block;">
            <img src="./img/picture1.jpg" alt="">
        </li>
        <li class="item">
            <img src="./img/picture2.jpg" alt="">
        </li>
        <li class="item">
            <img src="./img/picture3.jpg" alt="">
        </li>
    </ul>
</div>
<div class="lnbth">
    <div class="lastbtn">
        <img src="./img/last.png">
    </div>
    <div class="nextbtn">
        <img src="./img/next.png">
    </div>
</div>
<div class="small">
    <ul>
        <li class="btn active"></li>
        <li class="btn"></li>
        <li class="btn"></li>
    </ul>
</div>
        </div>
        <div id="app">
        <!-- 精选游学项目 -->
        <div class="youxue">
            <div class="myH2">
                精选游学项目
            </div>
            <div class="myul">
                <img src="./img/img1.jpg">
                <div class="title">海外游学多好玩，光是奥克兰就值得停留一周！</div>
        <div class="date">2021-11-01 ~ 2020-11-10</div>
       
        <div class="city">新西兰</div>
        <div class="desc">大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
          在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
          在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
          在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。</div>
            </div>
            <div class="myul">
                <img src="./img/img1.jpg">
                <div class="title">海外游学多好玩，光是奥克兰就值得停留一周！</div>
        <div class="date">2021-11-01 ~ 2020-11-10</div>
        <div class="city">新西兰</div>
        <div class="desc">大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
          在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
          在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
          在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。</div>
            </div>
            <div class="myul">
                <img src="./img/img1.jpg">
                <div class="title">海外游学多好玩，光是奥克兰就值得停留一周！</div>
        <div class="date">2021-11-01 ~ 2020-11-10</div>
        <div class="city">新西兰</div>
        <div class="desc">大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
          在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
          在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。大多数人的新西兰之旅，是从她最大的城市奥克兰开始的。
          在这个被戏称为"大纽村"的国家，奥克兰是为数不多与"国际"、"现代"沾上点边儿的城市。</div>
            </div>
        </div>
        <!-- 风采 -->
        <div class="fengcai">
            <div class="myH2">
                学生风采
            </div>
            <div class="myfengcai">
                <img src="./img/img2.jpg">
                <div class="title">在菲律宾游学是一种什么样的体验</div>
                <div class="date">2021-7-11</div>
                <div class="name">刘聪老师</div>
                <div class="like"><div class="dianzan"><img class="dianzan" src="./img/点赞.png"></div> 20</div>
            </div>
            <div class="myfengcai">
                <img src="./img/img2.jpg">
                <div class="title">在菲律宾游学是一种什么样的体验</div>
                <div class="date">2021-7-11</div>
                <div class="name">刘聪老师</div>
                <div class="like"><div class="dianzan"><img class="dianzan" src="./img/点赞.png"></div> 20</div>
            </div>
            <div class="myfengcai">
                <img src="./img/img2.jpg">
                <div class="title">在菲律宾游学是一种什么样的体验</div>
                <div class="date">2021-7-11</div>
                <div class="name">刘聪老师</div>
                <div class="like"><div class="dianzan"><img class="dianzan" src="./img/点赞.png"></div> 20</div>
            </div>
            <div class="myfengcai">
                <img src="./img/img2.jpg">
                <div class="title">在菲律宾游学是一种什么样的体验</div>
                <div class="date">2021-7-11</div>
                <div class="name">刘聪老师</div>
                <div class="like"><div class="dianzan"><img class="dianzan" src="./img/点赞.png"></div> 20</div>
            </div>
        </div>
        <!-- 常见问题 -->
        <div class="wenti">
            <div class="myH2">
                常见问题
            </div>
            <div class="mywenti">
                <div class="title">孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？</div>
                <div class="desc">
                    其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的经验，出发会有国内领队带团；而国外夏令营的学校都是英孚自己的学校，海外的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长保持联系。

                </div>
                <img src="./img/img3.png">
            </div>
            <div class="mywenti">
                <div class="title">孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？</div>
                <div class="desc">
                    其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的经验，出发会有国内领队带团；而国外夏令营的学校都是英孚自己的学校，海外的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长保持联系。

                </div>
                <img src="./img/img3.png">
            </div>
            <div class="mywenti">
                <div class="title">孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？</div>
                <div class="desc">
                    其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的经验，出发会有国内领队带团；而国外夏令营的学校都是英孚自己的学校，海外的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长保持联系。

                </div>
                <img src="./img/img3.png">
            </div>
            
        </div>
        <div class="footer">
            <div class="address">
                <div class="banquan">
                    杰普软件版权所有，咨询热线18832911123
                </div>
                <div class="shengming">
                    Copyright 1997 – 2018 gedu.org. All Rights Reserved　　京ICP备xxxxxx号
                </div>
            </div>
        </div>
    </div>
</body>
<script>
 var index=0;
 var timer;
 //通过定时器切换图片
 function myTimer(){
 timer=setInterval(
    function(){
   index++
   if(index>2){
       index=0
   }
   $('.item').eq(index).show().siblings().hide();
   //
   $('.btn').eq(index).addClass('active').siblings().removeClass('active')
},5000
 )
 }
 this.myTimer();
 var that=this;
 //通过左右键切换
 $('.nextbtn').click(function(){
     index++;
     if(index>2){
         index=0;
     }
     $('.item').eq(index).show().siblings().hide()
     $('.btn').eq(index).addClass('active').siblings().removeClass('active')
     //重置计时器
 clearInterval(timer);
 that.myTimer();
    })
    $('.lastbtn').click(function(){
     index--;
     if(index<0){
         index=2;
     }
     $('.btn').eq(index).addClass('active').siblings().removeClass('active')
     $('.item').eq(index).show().siblings().hide();
     //重置计时器
 clearInterval(timer);
 that.myTimer();
    })
   //点击小圆点切换图片
    //定位元素
    $('.btn').click(function(){
        //获取用户点击的小圆点下标
       index =$(this).index();
       //切换对应图片
       $('.item').eq(index).show().siblings().hide();
       //点击小圆点添加样式
       $(this).addClass('active').siblings().removeClass('active')
       clearInterval(timer);
       that.myTimer()
    })

</script>
</html>